import React, {Component} from 'react'
import {Link} from 'react-router'
import '../sass/CartItem'

export default class CartItem extends Component {
  constructor() {
    super()
  }

  render() {
    const {items, delCartItem, fetchSelectCartItem, changeCount, changeCountFree, testCount, type, showMessage, showGift, showActivity, showSpecification} = this.props

    return (
      <section>
        {
          items.map((item, index) =>
              <div className="cart-item-wrapper" key={index}>
                  {
                      item.type !== 1 &&
                      <div className="cart-activity">
                          <div className="cart-activity-left fl">
                              <span>{item.type === 2 ? '满赠' : item.type === 3 ? '加价购' : null}</span>
                              {
                                  item.satisfy ? item.gifts.map(i => i.choose ? `已满${item.promotionMethod}元,赠${i.name}一份` : null) : `${item.name}，还差${item.margin}元`
                              }
                          </div>
                          {
                              item.satisfy ? <Link className="cart-activity-right fr" onClick={showGift.bind(this, {gifts: item.gifts, activityId: item.activityId})}>
                                  选赠品<i className="iconfont icon-chakangengduo"/>
                              </Link> : item.link ?
                              <Link className="cart-activity-right fr" to={item.link}>
                                  去凑单<i className="iconfont icon-chakangengduo"/>
                              </Link> : null
                          }
                      </div>
                  }
                  {
                      item.gifts.map((i, index) =>
                          i.choose &&
                          <div className="cart-item cart-item-gift" key={index}>
                              <img src={i.middleImage ? i.middleImage : require('../images/goods_default.png')} alt={i.name}/>
                              <div className="info">
                                  <p className="title">{i.name}</p>
                                  <p className="price">¥0</p>
                                  <div className="count">
                                      <div className="count-wrapper">
                                          x1
                                      </div>
                                  </div>
                              </div>
                              <span className="gift-sign">赠品</span>
                          </div>
                      )
                  }
                  {
                      item.wCartGoodsVos.map((i, j) =>
                          <div key={j}>
                              <div className="cart-item">
                                  <Link to={`/p/${i.goodsId}`}><img src={i.middleImage ? i.middleImage : require('../images/goods_default.png')} alt={i.goodsName}/></Link>
                                  <div className="info">
                                      <Link to={`/p/${i.goodsId}`}><p className="title">{i.goodsName}</p></Link>
                                      <p className="specification">
                                          {
                                              i.goodsSpecifications && <span onClick={showSpecification.bind(this, {goodsId: i.goodsId, goodsSpecificationAttributeVos: [], needDefault: true})}>{i.goodsSpecifications.map(text => `${text} `)}<i className="iconfont s2b-xiangxiagengduo"/></span>
                                          }
                                      </p>
                                      <p className="price">¥{i.price}</p>
                                      <div className="count">
                                          <div className="count-wrapper">
                                              <i
                                                  className="iconfont s2b-jian minus"
                                                  onClick={i.price ?
                                                      parseInt(i.count) === 1 ? delCartItem.bind(this, i.id) : changeCount.bind(this, {
                                                        count: parseInt(i.count) > i.goodsInventory ? i.goodsInventory : parseInt(i.count) - 1,
                                                        goodsId: i.goodsId
                                                      })
                                                      : null}
                                              />
                                              <span className="number">
                                                  <input type="tel" name="count" autoComplete="off" value={i.count} onChange={changeCountFree.bind(this, i.goodsId)} onBlur={testCount.bind(this, i.goodsId)}/>
                                              </span>
                                              {parseInt(i.count) >= parseInt(i.goodsInventory) ?
                                                  <i
                                                      className="iconfont s2b-jia plus disabled"
                                                      onClick={showMessage.bind(this, '库存不足')}
                                                  /> :
                                                  <i
                                                      className="iconfont s2b-jia plus"
                                                      onClick={i.price ? changeCount.bind(this, {
                                                        count: parseInt(i.count) + 1,
                                                        goodsId: i.goodsId
                                                      }) : null}
                                                  />
                                              }
                                          </div>
                                          {!i.homeDelivery ?
                                              <p className="remains">不支持配送</p> :
                                              parseInt(i.count) >= parseInt(i.goodsInventory) ?
                                              <p className="remains">仅剩{i.goodsInventory}件</p> :
                                              type === 2 && !i.canPayByCredit ?
                                              <p className="remains">不支持授信支付</p> :
                                              null
                                          }
                                      </div>
                                  </div>
                                  <i
                                      className="iconfont s2b-shanchu del"
                                      onClick={delCartItem.bind(this, i.id)}>
                                  </i>
                                  {!i.homeDelivery || parseInt(i.count) > parseInt(i.goodsInventory) || type === 2 && !i.canPayByCredit ?
                                      <i
                                          className="iconfont icon-bukexuan radio"
                                      /> :
                                      <i
                                          className={i.choose ? 'iconfont icon-shangpinxuankuang-xuanqu1 radio active' : 'iconfont icon-shangpinxuankuang-weixuanqu radio'}
                                          onClick={i.price ? fetchSelectCartItem.bind(this, {
                                            cartId: i.id,
                                            cartStatus: i.choose ? '1' : '2'
                                          }) : null}>
                                      </i>
                                  }
                              </div>
                              {
                                  item.type !== 1 &&
                                  <div className="cart-item-activity">
                                      <div className="cart-item-activity-left fl">
                                          活动：{i.manZenVos.map((ii, jj) => ii.selected && <span key={jj}>{ii.name}</span>)}
                                      </div>
                                      <div className="cart-item-activity-right fr" onClick={showActivity.bind(this, {activity: i.manZenVos, goodsId: i.goodsId})}>
                                          修改
                                      </div>
                                      <div className="triangle"></div>
                                  </div>
                              }
                          </div>
                      )
                  }
              </div>
            )
        }
      </section>
    )
  }
}
